<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布帖子 - AI Hub</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/create-post.css}">
    <link rel="stylesheet" th:href="@{/css/category.css}">
</head>
<body>
    <header>
        <div class="header-container">
            <h1>AI Hub 社区</h1>
            <nav>
                <ul>
                    <li><a th:href="@{/}">首页</a></li>
                    <li><a th:href="@{/posts}">帖子</a></li>
                    <li><a th:href="@{/users}">用户</a></li>
                    <!-- 已登录状态显示欢迎信息和退出 -->
                    <sec:authorize access="isAuthenticated()">
                        <li class="welcome-message">
                            欢迎：<span sec:authentication="principal.username"></span>
                            <a th:href="@{/logout}" class="logout-link">退出</a>
                        </li>
                    </sec:authorize>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <div class="create-post-container">
            <div class="post-editor">
                <div class="editor-header">
                    <button id="cancelBtn" class="btn">取消</button>
                    <h2>发布新帖子</h2>
                    <button id="publishBtn" class="btn btn-primary">发布</button>
                </div>

                <div class="editor-content">
                    <div class="form-group">
                        <input type="text" id="postTitle" placeholder="添加标题..." class="post-title-input">
                    </div>

                    <div class="form-group">
                        <textarea id="postContent" placeholder="分享你的想法..." rows="6" class="post-content-input"></textarea>
                    </div>

                    <!-- 添加分类选择下拉框 -->
                    <div class="form-group">
                        <label for="postCategory">选择分类:</label>
                        <select id="postCategory" class="category-select">
                            <!-- 分类选项将通过JavaScript动态加载 -->
                            <option value="OTHER">其他</option>
                        </select>
                    </div>

                    <!-- 媒体上传部分 -->
                    <div class="media-upload-section">
                        <label class="upload-label">
                            <i class="upload-icon">+</i>
                            <input type="file" id="mediaUpload" multiple accept="image/*,video/*" style="display: none;">
                        </label>
                        <p class="upload-hint">点击或拖拽图片/视频到这里上传</p>
                    </div>

                    <div id="mediaPreviewContainer" class="media-preview-container">
                        <!-- 媒体预览将动态添加到这里 -->
                    </div>

                    <div class="post-settings">
                        <div class="visibility-setting">
                            <label for="visibility">可见性:</label>
                            <select id="visibility">
                                <option value="PUBLIC">公开</option>
                                <option value="PRIVATE">私密</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <p>&copy; 2025 AI Hub 社区. 保留所有权利.</p>
    </footer>

    <script th:src="@{/js/main.js}"></script>
    <script th:src="@{/js/create-post.js}"></script>
</body>
</html>